<template>
  <div class="tabcintrol">
    <div v-for="(item,index) in titles" :key="item+index" @click="btnclick(index)" :class="{isactive:index==currtindex}"><span>{{item}}</span></div>
  </div>
</template>

<script>
export default {
  props:{
    titles:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data () {
    return {
      currtindex:0
    }
  },
  methods: {
    btnclick(index){
      this.currtindex=index
      this.$emit('tabClick',index)
    }
  },
name:'tabcontrol'
}
</script>
<style  scoped>
 .tabcintrol{
   display: flex;
   height: 50px;
   line-height: 50px;
   background-color: #fff;
 }
 .tabcintrol div{
   flex: 1;
  
 }
 .tabcintrol span{
   color: black;
 }
 .isactive span{
   color:pink; 
   /* background-color: red; */
 }
 .isactive span {
   padding: 10px;
   border-bottom: 3px solid red;
 }
</style>